<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" th:href="@{/font-awesome/css/font-awesome.css}" href="../static/font-awesome/css/font-awesome.css" />
    <link rel="stylesheet" href="../static/css/bootstrap-dialog.css" th:href="@{/css/bootstrap-dialog.css}">
    <link rel="stylesheet" href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/matrix-login.css}" href="../static/css/matrix-login.css" />
    <link rel="icon" type="image/x-icon" th:href="@{/favicon.png}">
</head>
<body>
<div id="loginbox"><!--/*@thymesVar id="msg" type="java.lang.String"*/-->
    <form id="loginform" class="form-vertical" th:action="@{/login}" action="" method="post">
        <div class="control-group normal_text"> <h3><img th:src="@{img/ayit.png}" alt="Logo" /></h3></div>
        <div class="normal_text" th:text="${msg}" th:unless="${#strings.isEmpty(msg)}"></div>
        <div class="control-group">
            <div class="controls">
                <div class="main_input_box">
                    <span class="add-on bg_lg"><i class="icon-user"></i></span><input type="text" name="username" placeholder="Username" />
                </div>
            </div>
        </div>
        <div class="control-group">
            <div class="controls">
                <div class="main_input_box">
                    <span class="add-on bg_ly"><i class="icon-lock"></i></span><input type="password" name="password" placeholder="Password" id="pwd" />
                </div>
            </div>
        </div>
        <div class="form-actions">
            <span class="pull-left"><a href="#" class="flip-link" id="to-recover" >Lost password?</a></span>
            <span class="pull-right"><a type="submit" href="javascript:$('#loginform').submit();" >Login</a></span>
        </div>
    </form>
    <form id="recoverform" action="#" class="form-vertical">
        <div class="controls">
            <div class="form-group">
                <label  class="control-label">邮箱地址:</label>
                <input type="text" class="form-control" name="email" id="email" placeholder="请输入邮箱地址"/>
            </div>
            <div class="form-group">
                <label  class="control-label">新密码</label>
                <input type="password" class="form-control" id="password" name="password"  placeholder="请输入新密码">
            </div>
            <div class="form-group">
                <label  class="control-label">确认密码</label>
                <input type="password" class="form-control" id="rePassword" name="password"  placeholder="请再次输入密码">
            </div>
        </div>
        <div class="form-actions">
            <span class="pull-left"><a href="#" class="btn btn-success" id="to-login">&laquo; Back to login</a></span>
            <span class="pull-right"><a class="btn btn-success">Recover</a></span>
        </div>
    </form>
</div>
<style>
    .div10{

    }
    #reset_user{
        text-align: center;
        background-color: #cacfd4;
        width: 100%;
        height: 100%;
        padding-top:10%;
        display: none;
    }
    .div10 input{
        background-color: #cacfd4;
        border:1px solid #555;
        border-radius: 5px;
        width:40%;
    }
    .div10 span{
        display: inline-block;
        width:75px;
    }
</style>
<div style="">
<div id="reset_user">
    <div class="div10"><span>用户名：</span><input type="text" placeholder="用户名" id="user-name"></div>
    <div class="div10" style="margin-top: 30px;"><span>密码：</span><input type="password" id="user-pwd"></div>
    <div class="div10" style="margin-top: 30px;"><span>确认密码：</span><input type="password" id="user-pwd1"></div>
</div>
</div>

<script type="text/javascript" th:src="@{/js/jquery-1.11.2.min.js}"></script>

<script type="text/javascript" th:src="@{/js/bootstrap.min.js}" src="../static/js/bootstrap.min.js"></script>
<script type="text/javascript" th:src="@{/js/bootstrap-dialog.js}" src="../static/js/bootstrap-dialog.js"></script>
<script type="text/javascript" th:src="@{/js/layer.js}" src="../static/js/layer.js"></script>

<script >
    $(function(){
        $("#pwd").on("keyup",function (event) {
            if (event.keyCode==13){
                $('#loginform').submit();
            }
        })


        $("#to-recover").on("click",function () {
//            $('#reset_user').show();
            layer.open({
                type:1,
                title:['<h4>重 置 密 码</h4>','padding-left:212px'],
                anim: 1,
                shadeClose:true,
                area: ['500px', '300px'],
                offset: 'auto',
                skin: 'demo-class',
                btn: ['确定', '取消'],
                success: function(layero, index){
                    $('.layui-layer-title').css('background-color','#b1b1b1');
                },
                yes: function(index, layero){
                    if($('#user-name').val() == '')
                    {
                        layer.msg('未填写用户名');
                        return false;
                    }
                    if($('#user-pwd').val() == '' || $('#user-pwd1').val() == '')
                    {
                        layer.msg('请填写密码');
                        return false;
                    }
                    if($('#user-pwd').val() != $('#user-pwd1').val())
                    {
                        layer.msg('两次密码不一致');
                        return false;
                    }
                    if($('#user-name').val() != '')
                    {
                        $.ajax({
                            url:'admins/resetPassword',
                            data:{'username':$('#user-name').val()},
                            type:'post',
                            dataType:'json',
                            success:function(res){
                                console.log('结果');
                                console.log(res);
                            },

                        })
                    }
                }
                ,cancel: function() {
                    $('#reset_user').hide();
                    //return false 开启该代码可禁止点击该按钮关闭
                },

                content:$('#reset_user'),
            });



//            BootstrapDialog.show({
//                title:'重置密码',
//                message:'',
//                buttons:[{
//                    id:'button_1',
//                    label:'确定'
//                }]
//            });
        })

    })
</script>

</body>
</html>